<template>
	<div id="delivery_record" v-loading="$store.state.saving"
				element-loading-text="保存中" element-loading-spinner="el-icon-loading"
				element-loading-background = "rgba(255,255,255,0.8)">
		<el-tabs>
			<el-tab-pane label="交付记录">
				<el-form :disabled="deliveryRecord.delRecordId" ref="refDeliveryRecord" :rules="deliveryRecordRules" :model="deliveryRecord" label-width="110px" class="demo-ruleForm" style="overflow:hidden">
					<el-form-item label="客户">
						<el-input disabled v-model="contract.customer.customerName"></el-input>
					</el-form-item>
					<el-form-item label="合同名称">
						<el-input disabled v-model="contract.contractNum"></el-input>
					</el-form-item>
					<el-form-item label="交付计划">
						<el-input disabled v-model="deliveryPlan.deliveryTime.name"></el-input>
					</el-form-item>
					<el-form-item prop="delDate" label="交付日期" class="inline__">
						<el-date-picker type="date" style="width:100%" :picker-options="pickerOptions" v-model="deliveryRecord.delDate"></el-date-picker>
					</el-form-item>
					<el-form-item prop="otherTake" label="对方接收人" class="inline__">
						<el-select v-model="deliveryRecord.otherTake" value-key="contactId" style="width:100%!important">
							<el-option v-for="item in hisLinkMan" :key="item.contactId" :label="item.contactName" :value="item"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="我方负责人"  class="inline__">
						<el-select filterable v-model="deliveryRecord.ourDel" value-key="empId" style="width:100%!important">
							<el-option-group v-for="d in  dept_emps" :key="d.departmentId" :label="d.departmentName">
								<el-option v-for="e in d.deEmp" :key="e.empId" :label="e.empName" :value="e"></el-option>
							</el-option-group>
						</el-select>
					</el-form-item>
					<el-form-item label="金额"  class="inline__">
						<el-input readonly  v-model="totalMony"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input type="textarea" v-model="deliveryRecord.remark"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="saveForm" >保存</el-button>
						<el-button @click="_parent.deliveryRecordDialogVisible = false">取消</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="产品">
				<el-table  :data="deliveryPlan.deliveryProLists">
					<el-table-column label="图片">
						<template slot-scope="s">
							<el-image :src="s.row.productList.proDetail.proImgSrc" style="width:40px;height:40px;"></el-image>
						</template>
					</el-table-column>
					<el-table-column :show-overflow-tooltip="true" prop="productList.proDetail.product.productName" label="名称"></el-table-column>
					<el-table-column :show-overflow-tooltip="true" label="规格属性">
						<template slot-scope="s">
							<span v-for="item in s.row.productList.proDetail.abilities" :key="item.abilityId">{{item.abilityName}}</span>
						</template>
					</el-table-column>
					<el-table-column  :show-overflow-tooltip="true" prop="productList.proDetail.product.productBrand" label="品牌"></el-table-column>
					<el-table-column label="售价">
						<template slot-scope="s">
							<span>{{s.row.productList.discount}}元</span>
						</template>
					</el-table-column>
					<el-table-column label="数量" prop="deliveryCount">
					</el-table-column>
					<el-table-column label="金额">
						<template slot-scope="s">
							{{ s.row.productList.discount * s.row.deliveryCount }}
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>
		
	</div>
</template>

<script>
export default {
	name: 'deliveryRecord',
	props: ['contract',"_parent"],
	data() {
		return {
			dept_emps:{}, 		// 部门员工对象
			hisLinkMan:[],  	// 客户联系人
			deliveryRecord:{
				delDate:new Date(),
				ourDel:this.$store.state.user
			},
			deliveryPlan:{deliveryTime:{},deliveryProLists:[]},	// 交付计划对象
			deliveryRecordRules:{
				otherTake:[
					{ required: true, message: '请选择对方接收人姓名', trigger: 'blur' }
				],
				delDate:[
					{ required: true, message: '请选择交付日期', trigger: 'blur' }
				]

			},
			// 日期约束
			pickerOptions:{}
		}
	},
	methods:{
        // 表单提交
		saveForm(){
			this.$refs.refDeliveryRecord.validate((valid) => {
				if(valid){
                    this.deliveryPlan.contract = this.contract
					this.deliveryRecord.deliveryPlan = this.deliveryPlan
					this.$store.state.saving = true
					this.axios.post("api/in-sale/delivery-record",this.deliveryRecord)
					.then(() => {
						this.$store.state.saving = false
						this.global.mes_success("交付记录保存成功")
						// 关闭弹窗
						this._parent.deliveryRecordDialogVisible = false
						// 刷新
						this._parent.initData()
						// 还原对象
						this.deliveryRecord = {
							delDate:new Date(),
							ourDel:this.$store.state.user
						}
					})
					.catch(() => {
                        this.$store.state.saving = false
						this.global.mes_error("交付计划保存失败，请稍后再试！")
					})
				}else{
					this.global.mes_error("数据校验不通过，请修改后重新提交！")
					return false
				}
			})
			
		},
        // 计算所有产品交付是否完成
        allTotalMoney(){
            let total = 0
            this._parent.deliveryRecords.forEach(dr => {
                dr.deliveryPlan.deliveryProLists.forEach(dpl => {
                    total += dpl.deliveryCount * dpl.productList.discount
                });
            })
            return total
        },

	},
	computed:{
		totalMony(){
			let total = 0
			this.deliveryPlan.deliveryProLists.forEach(dpl => {
				total += dpl.deliveryCount * dpl.productList.discount
			});
			return total
			
		}
	},
	created(){
		/* 获取部门员工列表 */
			this.axios.get("api/dept_emps")
			.then(res => {
				this.dept_emps = res.data
			})
			.catch(
			)
			/* 获取客户联系人 */
			this.axios.get("api/customer/hisLinkMan",{params:{"customerId":this.contract.customer.customerId}})
			.then(res => {
				this.hisLinkMan = res.data
			})
	}
}
</script>

<style scoped>
#delivery_record .el-form-item{width: 100%;margin-bottom: 22px !important;}
.inline__{width:50%!important;display:inline-block}
</style>